<template>
    <transition name="load">
        <div class="loadBG flex ai-center jc-center" v-show="load">
            <div class="box">
                <div class="icon flex ai-center jc-center" :class="{'play': load}">
                    <i class="iconfont icon-loading play"></i>
                </div>
            </div>
        </div>
    </transition>
</template>

<script>
    export default {
        name: "Loading",
        props: ['load'],
    }
</script>

<style scoped lang="scss">
    .loadBG {
        position: fixed;
        top: 0;
        left: 0;
        width: 100vw;
        height: 100vh;
        user-select: none;
        background-color: rgba(0, 0, 0, .3);
        z-index: 640640;

        .box {
            padding: 2px;
            border-radius: 5px;
            background-color: #eee;

            @keyframes load {
                from {transform: rotate(0)}
                to {transform: rotate(360deg)}
            }

            .icon {

                &.play {
                    animation: load linear 1s infinite;
                }

                .iconfont {
                    line-height: 64px;
                    font-size: 64px;
                }
            }
        }
    }

    .load-enter-active, .load-leave-active {
        transition: all .2s;
    }

    .load-enter, .load-leave-to {
        opacity: 0;
        transform: scale(1.2, 1.2);
    }
</style>